<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>小米商城</title>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/type.css" />
		<script type="text/javascript" src="__PUBLIC__/js/jquery.min.js"></script>
		<script type="text/javascript" src="__PUBLIC__/js/bootstrap.min.js"></script>
		<style type="text/css">
			.version,.color{
			line-height:2em;
			}
		</style>
		<script>
		$(function (){
			//购买数量加减
			$(".cnt-btn").click(function (){
	            var num = parseInt($("#num").val());
	            //console.log(num);
	            if($(this).val() === "-"){
	               if(num === 1)return ;
	               $("#num").val(num-1);
	            }else if($(this).val() === "+"){
	                 if(num === {$goods.Number}) return ;
	                 $("#num").val(num+1);    
	             }
			});
			//自动纠正购买数量
			$("#num").keyup(function (){
				var num = parseInt($("#num").val());
				if(num<1){
	               $(this).val(1);
				}else if(num>{$goods.Number}){
					 $(this).val({$goods.Number});
				}  
			});
			//选择颜色和版本
			$('.color').click(function (){
				if($(this).attr('style')!='color:#4444ee')return;
				if($(this).html()==$("#color").val()){
					$(".version").attr('style','color:#4444ee');
					$("#color").val("");
					return;
				}
				//使用ajax
				$(".version").attr('style','color:#888888');
				//$()把存在的版本设为   $().attr('style','color:#4444ee');
				$.post("__CONTROLLER__/goodsColorAjax",{GoodId:{$goods.GoodId},Color:$(this).html()},function(msg){
			//ajax调用php中本控制器的函数
					if(msg==null){return;}
					for(var i=0;i<msg.length;i++){
						for(var p=0;p<$(".version").length;p++){
							if(msg[i]==$(".version:eq("+p+")").html()){
							$(".version:eq("+p+")").attr('style','color:#4444ee');}
						}
					}
     		   },'json');
				
				 var color = $(this).html();
	             $("#color").val(color);

				 var version=$("#version").val();
	            if(version==null||version=="")return;
	
	            $.post("__CONTROLLER__/switgoodsAjax",{GoodId:{$goods.GoodId},Color:color,Version:version},function(msg){
		            
	     			//ajax调用php中本控制器的函数
	            	if(msg==null){return;}
 					$('#keywordsdata').text(msg['KeyWords']);
 					$('#versiondata').text(msg['Version']);
 					$('#numberdata').text(msg['Number']);
 					$('#colordata').text(msg['Color']);
 					$('#pricedata').text(msg['Price']);
 					$('#pictureurldata').attr('src','__PUBLIC__/uploads/'+msg['PictureUrl']);
      		   },'json');
	             
	   		});
			$('.version').click(function (){
				if($(this).attr('style')!='color:#4444ee')return;
				if($(this).html()==$("#version").val()){
					$(".color").attr('style','color:#4444ee');
					$("#version").val("");
					return;
				}
				//使用ajax
				$(".color").attr('style','color:#888888');
				//$()把存在的版本设为   $().attr('style','color:#4444ee');
				$.post("__CONTROLLER__/goodsVersionAjax",{GoodId:{$goods.GoodId},Version:$(this).html()},function(msg){
			//ajax调用php中本控制器的函数
					if(msg==null){return;}
					for(var i=0;i<msg.length;i++){
						for(var p=0;p<$(".color").length;p++){
							if(msg[i]==$(".color:eq("+p+")").html()){
							$(".color:eq("+p+")").attr('style','color:#4444ee');}
						}
					}
     		   },'json');
				
				 var version = $(this).html();
	             $("#version").val(version);	

	        	 var color=$("#color").val();
		            if(color==null||color=="")return;
		
		            $.post("__CONTROLLER__/switgoodsAjax",{GoodId:{$goods.GoodId},Color:color,Version:version},function(msg){
			            
		     			//ajax调用php中本控制器的函数
		     					if(msg==null){return;}
		     					$('#keywordsdata').text(msg['KeyWords']);
		     					$('#versiondata').text(msg['Version']);
		     					$('#numberdata').text(msg['Number']);
		     					$('#colordata').text(msg['Color']);
		     					$('#pricedata').text(msg['Price']);
		     					$('#pictureurldata').attr('src','__PUBLIC__/uploads/'+msg['PictureUrl']);
		          		   },'json');
	             
	   		});
		});
		//加入购物车
		function addCart(){
			var num = parseInt($("#num").val());//获取商品数量
			var color = $("#color").val();  //获取商品颜色
			var version = $("#version").val();  //获取商品版本
			if(color==""||version==""||color==null||version==null){alert('请选择颜色/版本');return;}
			window.location.href='__MODULE__/Cart/add/gid/{$goods.GoodId}/num/'+num+'/color/'+color+'/version/'+version;
		}
   		</script>
		
	
</head>
<body>
<body>

		<section class="container-fluid">
			<div class="row">
				<header>
					<div class="col-md-1"></div>
					<div class="col-md-5 col-xs-12">
						<div class="row placeholders"><br><br><br>
							<img src="__PUBLIC__/uploads/{$goods.PictureUrl}" id="pictureurldata"/>
						</div>
					</div>
				</header>

				<aside class="col-md-5 col-xs-12">
					<div class="col-md-1"></div>
					<div class="col-md-11">
					
						<h3>{$goods.GoodName}&emsp;<br>
						<span class="goods_span4">商品编号:{$goods.GoodId}</span><br>
						</h3>
						<span class="goods_span1" id="keywordsdata">{$goods.KeyWords}</span>
						<br>
						<span class="goods_span2"><span id="colordata">{$goods.Color}</span>&emsp;<span id="versiondata">{$goods.Version}</span><br />
						<span class="goods_span3"><span id="pricedata">{$goods.Price}</span>元&emsp;&emsp;&emsp;</span>
						<span class="goods_span2">库存:<span id="numberdata">{$goods.Number}</span></span>
					</span>
					<h4>选择颜色</h4>
					<div class="goods_div">
						<foreach name="colors" item="c">
						  <a href="#">
									<div class="text-center goods_span3 col-md-5 col-xs-5 goods_border1 color"  style="color:#4444ee">{$c.Color}</div>
							</a>
						  <div class="col-md-1 col-xs-1"></div>
						</foreach>	
					</div>
					
					<br><br>
					<h4>选择版本</h4>
					<div class="goods_div">
						<foreach name="versions" item="g">
						  <a href="#">
									<div class="col-md-5 col-xs-5 goods_border1 text-center goods_span3 version" style="color:#4444ee" width="100%">{$g.Version}</div>
							</a>
						  <div class="col-md-1 col-xs-1"></div>
						</foreach>	
					</div>
						<div class="col-md-12 col-xs-12">
							<br><div class="col-md-4 col-xs-5 goods_span4">购买数量：</div>
							<div class="row">
							<input type="button" value="-" class="cnt-btn">
							<input type="text" class="col-md-3 col-xs-5" style="margin-bottom: 3%; margin-left: -3%; margin-right: 3%;" value="1" id="num">
							<input type="button" value="+" class="cnt-btn">
							</div>
							<div class="col-md-1 col-xs-2" ></div><br>
							<div class="row">
								<div class="col-md-12 col-xs-12">
									<div class="col-md-5 col-xs-6 goods_span4">你选择的颜色：</div>
									<input type="text" class="col-md-4 col-xs-4" style="margin-bottom: 3%;background:white" id="color" value="" disabled>
								</div>
							</div>	
							<div class="row">
								<div class="col-md-12 col-xs-12">
									<div class="col-md-5 col-xs-6 goods_span4">你选择的版本：</div>
									<input type="text" class="col-md-4 col-xs-4" style="margin-bottom: 3%;background:white" id="version" value="" disabled>	
								</div>
							</div>
						</div>
							<div class="col-md-12 col-xs-12">
							<button type="button" class="btn btn-primary btn-lg col-md-4 col=xs-10" onclick="addCart()">加入到购物车</button>
						</div>
							</div>
						
				    
					</div>
					<div class="col-md-1"></div>
			</div>
			</aside>

		</section><br />

		<footer class="goods_footer">
			<div class="col-md-12">
				<div class="col-md-1"></div>
				<div class=" col-md-10 col-xs-12 ">
					<div>
						<ul class="nav nav-tabs goods_ul" id="myTab">
							<li class="col-md-4 col-xs-4">
								<a href="#one" data-toggle="tab"><span>简介</span></a>
							</li>
							<li class="col-md-4 col-xs-4">
								<a href="#two" data-toggle="tab"><span>参数</span></a>
							</li>
							<li class="col-md-4 col-xs-4">
								<a href="#three" data-toggle="tab"><span>评价</span></a>
							</li>
						</ul>

						<div id="myTabContent" class="tab-content">
							<div class="tab-pane fade in active" id="one">
								<br><br><center><neq name="goods.Description" value="">{$goods.Description}</neq>
								<eq name="goods.Description" value=""><h4>暂无简介</h4></eq></center><br><br>
							</div>
							<div class="tab-pane fade" id="two">
							<br><br>
							<center><table width=40% style="font-size:1.5em;line-height:2em;">
								<foreach name="attr" item="a"> 
								  <tr>
								  <td width=40%>{$a.AttributeName}</td><td>：</td><td width=40%>{$a.AttributeDefVal}</td>
								  </tr>
								</foreach>
								</table>
								</center>
								<br><br>
							</div>
							<div class="tab-pane fade" id="three">
							<br><br>
											<neq name="ors" value="">
		<center>
		<neq name="goods.Description" value="">
			<table class="table table-bordered" style="text-align:center">
		 <tr>
		 <td>商品名称</td><td>商品颜色</td><td>商品版本</td><td>商品数量</td><td>用户昵称</td><td>评价</td><td>星级</td><td>回复评价</td>
		 </tr>
		 <foreach name="ors" item="o">
		 <tr>
		 <td>{$o.GoodName}</td>
		 <td>{$o.goods_Color}</td>
		 <td>{$o.goods_Version}</td>
		 <td>{$o.GoodCount}</td>
		 <td>{$o.UserId}</td>
		 <td>{$o.PingJia}</td>
		 <td>{$o.xing}</td>
		 <td>{$o.Reply}</td>
		 </tr>
		 </foreach>
		 </table>
		 
		 <eq name="goods.Description" value=""><h4>暂无参数</h4></eq>
		 </center><br><br>
		 </neq>
		 <eq name="ors" value=""><center><h4>还没有人评价过，您要来一单吗？~</h4></center><br><br></eq>
		 
		 
							</div>
						</div>

					</div>
				</div>
				<div class="col-md-1 col-xs-1"></div>
			</div>
		</footer>
</body>
</html>